<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">

</head>
<style type="text/css">


    /* 第一种解决方案：css3样式改变checkbox默认样式 */
    .checkbox01 input[type=checkbox] + label::before {
        content: "\a0";  /* 不换行空格 */
        display: inline-block;
        vertical-align: 2px;
        width: 14px;
        height: 14px;
        margin-right: 5px;
        border-radius: 3px;
        border:1px solid #c0c0c0;
        //background-color: #261c19;
        text-indent: 2px;
        line-height: .65;  /* 行高不加单位，子元素将继承数字乘以自身字体尺寸而非父元素行高 */
    }
    .checkbox01 input[type="checkbox"]:checked + label::before {
        content: "\2713"; /* 对号的 Unicode 编码 */
        background-color: #f07000; /* 选中的背景颜色 */
    }
    .checkbox01 input[type='checkbox'] {
        /* 隐藏掉原先实际的 checkbox 框，之所以没用 display:none; 这种简单直接的方式，
           是因为这种方法会把它从键盘 tab 键切换焦点的队列中完全删除 */
        position: absolute;
        clip:rect(0,0,0,0);       /* 隐藏方式一：裁剪为0 */
        /* visibility: hidden; */ /* 隐藏方式二：隐藏属性 */
    }

</style>

<div id="mydiv" style="width: 93%;margin-left: 30px">

    <div class="row" style="margin-bottom: 10px;">
        <span><b>注意:</b>*未了不耽误您的出行，请及时支付</span>
    </div>

    <div class="row">
        <div style="width: 100%; height: 50px; padding-left:20px;padding-top: 5px; background-color:#ffeaa7;
                                -moz-box-shadow: 0px 0px 2px  #909090;-webkit-box-shadow: 0px 0px 2px  #909090;">
            <span style="font-size: 23px;color: #e84118">未支付订单</span>
        </div>
    </div>

    <div class="row">
        <div style="width: 100%; height: 20px;padding-top: 5px; ">
            <div class="checkbox01" style="float: right">
                全选
                <input type="checkbox" id="chk" value="0" />
                <label for="chk"></label>
            </div>
        </div>
    </div>

    <div class="row" style="background-color:#ffffff; border: 1px dashed #dbdbdb;margin-top: 10px; height: 230px;
                            -moz-box-shadow: 0px 0px 1px  #909090;-webkit-box-shadow: 0px 0px 1px  #909090;">
        <div class="col-md-8" style="padding: 20px">
            <p>
                <span style="font-size: 25px; color: #00a8ff">待支付</span>
                <span>请在17:15前登机</span>
            </p>
            <p>
                <span>12月30日&nbsp;&nbsp;周一</span>
                <span>&nbsp;&nbsp;北京-上海&nbsp;&nbsp;</span>
                <span>7:30出发</span>
                <span class="glyphicon glyphicon-arrow-right" style="color: #57606f"></span>
                <span>9:15到达</span>
                <span style="font-size: 12px;color: #747d8c;">&nbsp;&nbsp;大约时长:1h35m</span>
            </p>
            <p style="font-size: 12px;color: #747d8c">东方航空&nbsp;MU5534&nbsp;&nbsp;空客320(中型)&nbsp;&nbsp;公务舱</p>
            <p>
                <span>订单号</span>
                <span>11256785564</span>
                &nbsp;&nbsp;&nbsp;&nbsp;
                <span>限乘当日当次机</span>
            </p>
            <p>
                <a class="ticket_mess" href="javascript:;" style="text-decoration: none">
                    <span class="glyphicon glyphicon-chevron-right"></span>
                    订单详情
                </a>
            </p>
            <div style="display: none">
                <p>
                    <span>成人: 李白</span>
                    &nbsp;&nbsp;&nbsp;&nbsp;
                    <span>登记证件号: 1524325042*****1235</span>
                    &nbsp;&nbsp;&nbsp;&nbsp;
                    <span>手机号: 132****1235</span>
                </p>
                <p>
                    <span>票价: ￥730</span>
                    &nbsp;&nbsp;&nbsp;&nbsp;
                    <span>机建: ￥50</span>
                    &nbsp;&nbsp;&nbsp;&nbsp;
                    <span>燃油税: ￥0</span>
                </p>
            </div>
            <p>
                <span>总金额</span>
                <span style="font-size: 20px; color: #e84118">￥780</span>
            </p>
        </div>
        <div class="col-md-4" style="height: 100%; padding-right: 0px">
            <div style="border-left: 2px dashed #dbdbdb; height: 90%;margin-top: 10px; float:left"></div>
            <div class="checkbox01" style=" float: right">
                <input type="checkbox" id="checkboxLogin1" value="780" />
                <label for="checkboxLogin1"></label>
            </div>
            <div style="margin-top:85px;margin-left: 30px; user-select:none;color: #ced6e0;">
                <span>订票无忧</span><br>
                <span>价格保证，确保出行</span>
            </div>
            <br>
            <div style="position: absolute; bottom: 20px;padding-left: 120px">
                <div style="float: right; padding-left: 5px">
                    <a href="#" class="btn btn-block" style="width:80px; background-color: #00a8ff; color:  #ffffff">取消</a>
                </div>

                <div style="float: right">
                    <a href="/pay" class="btn btn-block" style="width:80px; background-color: #ff4757; color:  #ffffff">支付</a>
                </div>
            </div>
        </div>
    </div>


    <div class="row" style="background-color:#ffffff; border: 1px dashed #dbdbdb;margin-top: 10px; height: 230px;
                            -moz-box-shadow: 0px 0px 1px  #909090;-webkit-box-shadow: 0px 0px 1px  #909090;">

        <div class="col-md-8" style="padding: 20px">
            <p>
                <span style="font-size: 25px; color: #00a8ff">待支付</span>
                <span>请在17:15前登机</span>
            </p>
            <p>
                <span>12月30日&nbsp;&nbsp;周一</span>
                <span>&nbsp;&nbsp;北京-上海&nbsp;&nbsp;</span>
                <span>7:30出发</span>
                <span class="glyphicon glyphicon-arrow-right" style="color: #57606f"></span>
                <span>9:15到达</span>
                <span style="font-size: 12px;color: #747d8c;">&nbsp;&nbsp;大约时长:1h35m</span>
            </p>
            <p style="font-size: 12px;color: #747d8c">东方航空&nbsp;MU5534&nbsp;&nbsp;空客320(中型)&nbsp;&nbsp;公务舱</p>
            <p>
                <span>订单号</span>
                <span>11256785564</span>
                &nbsp;&nbsp;&nbsp;&nbsp;
                <span>限乘当日当次机</span>
            </p>
            <p>
                <a class="ticket_mess" href="javascript:;" style="text-decoration: none">
                    <span class="glyphicon glyphicon-chevron-right"></span>
                    订单详情
                </a>
            </p>
            <div style="display: none">
                <p>
                    <span>成人: 李白</span>
                    &nbsp;&nbsp;&nbsp;&nbsp;
                    <span>登记证件号: 1524325042*****1235</span>
                    &nbsp;&nbsp;&nbsp;&nbsp;
                    <span>手机号: 132****1235</span>
                </p>
                <p>
                    <span>票价: ￥730</span>
                    &nbsp;&nbsp;&nbsp;&nbsp;
                    <span>机建: ￥50</span>
                    &nbsp;&nbsp;&nbsp;&nbsp;
                    <span>燃油税: ￥0</span>
                </p>
            </div>
            <p>
                <span>总金额</span>
                <span style="font-size: 20px; color: #e84118">￥780</span>
            </p>
        </div>
        <div class="col-md-4" style="height: 100%;padding-right: 0px">
            <div style="border-left: 2px dashed #dbdbdb; height: 90%;margin-top: 10px; float:left"></div>
            <div class="checkbox01" style=" float: right">
                <input type="checkbox" id="checkboxLogin2" value="780"/>
                <label for="checkboxLogin2"></label>
            </div>
            <div style="margin-top:85px;margin-left: 30px; user-select:none;color: #ced6e0;">
                <span>订票无忧</span><br>
                <span>价格保证，确保出行</span>
            </div>
            <br>
            <div style="position: absolute; bottom: 20px;padding-left: 120px">
                <div style="float: right; padding-left: 5px">
                    <button class="btn btn-block" style="width:80px; background-color: #00a8ff; color:  #ffffff">取消</button>
                </div>

                <div style="float: right">
                    <a href="/pay" class="btn btn-block" style="width:80px; background-color: #ff4757; color:  #ffffff">支付</a>
                </div>
            </div>
        </div>
    </div>

    <div class="row" style="margin-top: 10px;height: 30px;margin-bottom: 30px;padding-right: 13px">
        <div style="float: right">
            <a href="javascript:;" id="allpay" disabled="disabled" class="btn btn-block" style="width:80px;opacity: 0.5; background-color: #ff4757; color:  #ffffff">支付</a>
        </div>
        <div style="float: right;padding-top: 10px">
            <span>总价:</span>
            <span id="price" style="font-size: 20px; color: #e84118">￥0</span>
            &nbsp;&nbsp;&nbsp;&nbsp;
        </div>
    </div>

</div>

<script type="text/javascript">

    $(function(){

        $('.ticket_mess').click(function () {

            if($(this).parent().next().css("display")=="none"){
                $(this).parent().next().show();
                $(this).parent().parent().parent().css("height","290px");
                $(this).html("<span class=\"glyphicon glyphicon-chevron-down\"></span>\n" +
                    "                                        收起");
            }else {
                $(this).parent().next().hide();
                $(this).parent().parent().parent().css("height","230px");
                $(this).html("<span class=\"glyphicon glyphicon-chevron-right\"></span>\n" +
                    "                                        订单详情");
            }
        });

        var chkbox = function () {
            var allprice = 0;
            //$('input:checkbox:checked') 等同于 $('input[type=checkbox]:checked')
            //意思是选择被选中的checkbox
            $.each($("#mydiv :checked"),function(){
                //window.alert("你选了："+ $('input[type=checkbox]:checked').length+"个，其中有："+$(this).val());
                allprice = allprice + parseInt($(this).val());
                //console.log($(this).val());
                //alert($(this).val());
                //alert(allprice);
                //.log(allprice);
            });
            //console.log(allprice);
            $('#price').text("￥"+ allprice);
        }

        var $chk = $("#chk");
        $("#chk").click(function(){
            if($chk.prop("checked") == true){
                $("#mydiv :checkbox").prop("checked",true)
            } else {
                $("#mydiv :checkbox").prop("checked",false)
            }
            chkbox();
        });

        $("#mydiv :checkbox").click(function(){
            if($("#mydiv :checked").length == $("#mydiv :checkbox").length){
                $chk.prop("checked",true)
            } else {
                $chk.prop("checked",false)
            }
            chkbox();

            $("#allpay").attr('disabled',"true");
            //alert($("#mydiv :checked").length);
            if($("#mydiv :checked").length >= 1){
                //$("#allpay").removeAttr("disabled");
               // alert("1"+$("#mydiv :checked").length);
                $("#allpay").css('opacity',"1");
                $("#allpay").attr('href',"/pay");
                $("#allpay").removeAttr("disabled");
            }else if($("#mydiv :checked").length == 0){
                //alert("2"+$("#mydiv :checked").length);
                $("#allpay").css('opacity',"0.5");
                $("#allpay").attr('href',"javascript:;");
            }
        })




    });

</script>